<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞机大战</title>
</head>
<style>
  img {
    display: none;

  }

  html,
  body {
    margin: 0px;
  }

  .count {
    height: 40px;
  }

  #restart {
    padding: 10px 20px;
    border-radius: 10px;
    background-image: linear-gradient(45deg, #e400ff, #005aff, #c3e5f0);
  }
</style>

<body>
  <img src="http://img2.imgtn.bdimg.com/it/u=1496930977,2794910071&fm=26&gp=0.jpg" id="feiji">
  <img src="http://img0.imgtn.bdimg.com/it/u=3148305291,1235207659&fm=26&gp=0.jpg" id="zidan">
  <img src="http://img4.imgtn.bdimg.com/it/u=3951938443,3972900211&fm=26&gp=0.jpg" id="diji">
  <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=361321303,654228977&fm=26&gp=0.jpg"
    id="deleteImg">
  <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3571535281,3105722629&fm=26&gp=0.jpg"
    id="beijing">
  <div class="count">
    <span id="score">得分：</span>
    <span id="hpspan"></span>
    <button id="restart">开始</button>
  </div>
  <canvas id="c1"></canvas>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    window.onload = function () {
      var oC = document.getElementById("c1");
      oC.height = window.screen.height;
      oC.width = window.screen.width;
      var oCG = oC.getContext('2d');
      var feiji = document.getElementById('feiji');
      var zidan = document.getElementById('zidan');
      var diji = document.getElementById('diji');
      var score = document.getElementById('score');
      var hpspan = document.getElementById('hpspan');
      var beijing = document.getElementById('beijing');
      var deleteImg = document.getElementById('deleteImg');
      $(window).resize(resizeCanvas);
      function resizeCanvas() {
        $(oC).attr("width", $(window).get(0).innerWidth);
        $(oC).attr("height", $(window).get(0).innerHeight);
      };
      var mainInterval;
      $('#restart').click(function () {
        window.clearInterval(mainInterval);
        run();
        $('#restart').css({ "display": "none" });
      });
      resizeCanvas();
      //帧数
      var frame = 60;
      //飞机宽,高
      var width = 42;
      var height = 45;
      //飞机坐标
      var feijiX = oC.width / 2 - width;
      var feijiY = oC.height / 2;
      oC.onmousemove = function (ev) {
        //鼠标x,y
        var x = ev.clientX - oC.offsetLeft;
        var y = ev.clientY - oC.offsetTop;
        //飞机x,y
        feijiX = x - width / 2;
        feijiY = y - height / 2;
      }

      oC.ontouchmove = function (ev) {
        ev.preventDefault();
        //鼠标x,y
        var x = ev.touches[0].clientX - oC.offsetLeft;
        var y = ev.touches[0].clientY - oC.offsetTop;
        //飞机x,y
        feijiX = x - width / 2;
        feijiY = y - height / 2;
      }

      //飞机对象
      function Airplane(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
      }
      //子弹对象
      function Zidan(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
      }
      //敌机对象
      function Diji(x, y, width, height, deleteImg, time) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.hp = 1;
        this.deleteImg = deleteImg;
        this.time = time;
        this.showImg = function () {
          let s = setInterval(() => {
            oCG.drawImage(this.deleteImg, this.x, this.y, this.width, this.height);
          }, 1000 / 60);
          setTimeout(function () {
            window.clearInterval(s);
          }, 1000 / 60 * 10)
        }
      }
      //背景
      function Beijing(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
      }


      function run() {
        //飞机hp
        var hp = 1;
        hpspan.innerHTML = '生命值：' + hp;
        //成绩
        var sc = 0;
        score.innerHTML = '得分：' + sc;
        //背景
        var bj = new Beijing(0, 0, oC.width, 640);

        //子弹计数器
        var zidanCount = 0;
        //子弹频率
        var zidanPinLv = 5;
        //画布子弹的数量
        var zidanList = [];
        //子弹数
        var zidannum = 1;

        //敌机计数器
        var dijiCount = 0;
        //敌机频率
        var dijiPinLv = 70;
        //敌机数量
        var dijiList = [];
        //规则开关
        var flag = true;
        //游戏动画定时器
        mainInterval = setInterval(function () {
          
          //清空画布
          clearCan();
          //画背景
          oCG.drawImage(beijing, bj.x, bj.y, bj.width, bj.height);
          oCG.drawImage(beijing, bj.x, bj.y - bj.height, bj.width, bj.height);
          bj.y++;
          if (bj.y > bj.height) {
            bj.y = 0;
          }
          // //遍历子弹
          zidanList = zidanList.filter(item => {
            //画子弹
            oCG.drawImage(zidan, item.x, item.y, item.width, item.height);
            item.y -= zidanPinLv;
            //子弹超过画布删除
            if (item.y > 0) {
              return item;
            }
          })

          //画飞机
          oCG.drawImage(feiji, feijiX, feijiY, width, height);
          
          //得分规则
          if (sc == 20 && flag) {
            zidannum = 3;
            dijiPinLv = 40;
            hp+=1;
            flag = false;
          }else if(sc == 35 && flag){
            hp+=1;
            flag = false;
          }else if(sc == 50 && flag){
            zidannum = 5;
            dijiPinLv = 20;
            hp+=1;
            flag = false;
          }else if(sc == 100 && flag){
            zidannum = 7;
            dijiPinLv = 10;
            hp+=1;
            flag = false;
          }else if(sc == 150 && flag){
            dijiPinLv = 5;
            hp+=1;
            flag = false;
          }

          switch (sc) {
            case 3:
              flag = true;
              break;
            case 34:
              flag = true;
              break;
            case 49:
              flag = true;
              break;
            case 99:
              flag = true;
              break;
            case 149:
              flag = true;
              break;
          }
          hpspan.innerHTML = '生命值：' + hp;


          //计数10次加一个子弹
          zidanCount++;
          if (zidanCount % 10 == 0) {
            for (let index = 1; index <= (zidannum - 1) / 2; index++) {
              var zid1 = new Zidan(feijiX + width / 2 - 5 - 15 * index, feijiY - 10, 10, 10);
              var zid2 = new Zidan(feijiX + width / 2 - 5 + 15 * index, feijiY - 10, 10, 10);
              zidanList.push(zid1);
              zidanList.push(zid2);
            }
            var zid = new Zidan(feijiX + width / 2 - 5, feijiY - 10, 10, 10);
            zidanList.push(zid);
            zidanCount = 0;
          }

          //放敌机
          dijiCount ++;
          if (dijiCount % dijiPinLv == 0) {
            let x = Math.floor(Math.random() * oC.width);
            if (x > oC.width - 77) {
              x = oC.width - 77;
            }
            var dj = new Diji(x, -60, 77, 75, deleteImg, 20);
            dj.hp = sc / 10;
            dijiList.push(dj);
            dijiCount = 0;
          }

          //画敌机
          dijiList = dijiList.filter((item, index) => {
            //画敌机
            oCG.drawImage(diji, item.x, item.y, item.width, item.height);
            item.y +=3;
            //子弹超过画布删除
            if (item.y < oC.height) {
              return item;
            }
          })
          //判断子弹撞击
          zidanList.forEach((zditem, zindex) => {
            dijiList.forEach((djitem, dindex) => {
              if (zditem.x > djitem.x && zditem.x < djitem.x + djitem.width
                && zditem.y > djitem.y && zditem.y < djitem.y + djitem.height) {
                djitem.hp--;
                if (djitem.hp <= 0) {
                  djitem.showImg();
                  dijiList.splice(dindex, 1);
                  score.innerHTML = '得分：' + ++sc;
                }
                zidanList.splice(zindex, 1);
              }
            })
          })

          //判断飞机撞击
          dijiList.forEach((djitem, dindex) => {
            if (
              (feijiX > djitem.x && feijiX < djitem.x + djitem.width
                && feijiY > djitem.y && feijiY < djitem.y + djitem.height)
              ||
              (feijiX + width > djitem.x && feijiX + width < djitem.x + djitem.width
                && feijiY > djitem.y && feijiY < djitem.y + djitem.height)
            ) {
              djitem.showImg();
              hpspan.innerHTML = '生命值: ' + --hp;
              dijiList.splice(dindex, 1);
              if (!hp) {
                window.clearInterval(mainInterval);
                oCG.font = "30px Verdana";
                // 创建渐变
                var gradient = oCG.createLinearGradient(0, 0, oC.width, 0);
                gradient.addColorStop("0", "magenta");
                gradient.addColorStop("0.5", "blue");
                gradient.addColorStop("1.0", "red");
                // 用渐变填色
                oCG.fillStyle = gradient;
                oCG.fillText("游戏结束", oC.width / 2 - 30 * 2, 300);
                $('#restart').css({ "display": "inline" });
              }

            }
          })
        }, 1000 / frame);
      }
    };


    function log(msg) {
      console.log(msg);
    }

    function clearCan() {
      var oC = document.getElementById("c1");
      var oCG = oC.getContext('2d');
      oC.height = oC.height;
    }
  </script>
</body>

</html>